<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>活动信息</title>
<link href="/tmx/css/common.css" rel="stylesheet" />
<script type="text/javascript" src="/tmx/js/jquery-1.8.1.min.js"></script>
<script charset="utf-8" src="/tmx/js/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8" src="/tmx/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/tmx/js/myJs2.js"></script>
<style>
	#clipArea {
		margin: 20px;
		height: 300px;
	}
	#file,
	#clipBtn {
		margin: 20px;
	}
	#view {
		margin: 0 auto;
		width: 200px;
		height: 200px;
	}
</style>
<script type="text/javascript">
var fd = new FormData();
var clipFlag = false; // 图片是否裁剪
window.onload = function(){
	
	var flag = $('#flag').val();
	if(flag=="saveOK"){
		alert("保存成功");
	}else if(flag=="saveNO"){
		alert("保存失败");
	}
	$('#flag').val('');
}

function saveActivity(){
	/* var title = $.trim($('#title').val());
	editor6.sync();
	var content = $.trim($('#content').val());
	var picDesc = $.trim($('#picDesc').val());
	if(title==""){
		alert("标题不能为空");
		return;
	}
	if(content==""){
		alert("内容不能为空");
		return;
	}
	if(picDesc==""){
		alert("图片描述不能为空");
		return;
	}
	
	var images = $(":file");
	for(var i=0;i<images.length;i++){
		var image = images[i];
		if($(image).val().length==0){
			alert("上传图片不能为空");
			return;
		}
	}

	$('#form1').submit(); */
	
	var title = $.trim($('#title').val());
	editor6.sync();
	var content = $.trim($('#content').val());
	var picDesc = $.trim($('#picDesc').val());
	if(title==""){
		alert("标题不能为空");
		return;
	}
	if(content==""){
		alert("内容不能为空");
		return;
	}
	if(picDesc==""){
		alert("图片描述不能为空");
		return;
	}
	
	var images = $(":file");
	for(var i=0;i<images.length;i++){
		var image = images[i];
		if($(image).val().length==0){
			alert("上传图片不能为空");
			return;
		}
	}
	
	if(!clipFlag){
		alert('还未裁剪图片');
		return;
	}
	
	fd.append('title',title);
	fd.append('content',content);
	fd.append('picDesc',picDesc);
	$.ajax({
	    url:"/tmx/ActivityAction!saveActivity.action",
	    type:"POST",
	    data:fd,
	    dataType: "json", 
	    contentType: false, //必须
	    processData: false, //必须
	    success:function(data){
	    	alert(data.message);
			if(data.success){
				location.href="/tmx/ActivityAction!getActivityListForPage.action";
			} 
	    }
	}); 
}
function resetActivity(){
	location.href="/tmx/backPage/activity.jsp";
}
function FanHui(){
	location.href="/tmx/ActivityAction!getActivityListForPage.action";
}
</script>
</head>
<body>
<div class="content">
  <div class="contentTitle">
    <div class="titImg"></div>
    活动新增<a style="float: right;font-size: 15px;margin-right: 5px;" href="javascript:void(0)" onclick="FanHui()">&lt;&lt;返回</a></div>
  <!-- <form action="" method="post" id="form1" enctype="multipart/form-data"> -->
  <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:10px;">
    <tr>
      <td  class="column4_1 h30" style="text-align:right">标题：</td>
      <td  class="column4_3 h30 align" colspan="3"><input type="text" class="nInput" name="title" id="title"/></td>
    </tr>
    <tr>
      <td  class="column4_1 h30" style="text-align:right">正文:</td>
      <td  class="column4_3 align" colspan="3" style="padding: 5px;">
      <textarea class="textArea" style="width:300px;height:200px" name="content" id="content"></textarea></td>
    </tr>
    <tr>
      <td  class="column4_1 h30" style="text-align:right">上传图片:</td>
      <td  class="column4_3 align" colspan="3" style="padding: 5px;">
      	<input type="file" style="border:none" id="image" name="image" accept="image/*"/>
      </td>
    </tr>
    <tr>
      <td  class="column4_1 h30" style="text-align:right">图片剪裁区:</td>
      <td><div id="clipArea"></div>（注：1.图片可拖动；2.双击图片，图片顺时针旋转90度；3.滚动鼠标图片放大/缩小）</td>
    </tr>
    <tr>
      <td  class="column4_1 h30" style="text-align:right">裁剪图片:</td>
      <td><button class="save2" id="clipBtn">裁剪</button></td>
    </tr>
    <tr>
      <td  class="column4_1 h30" style="text-align:right">图片预览:</td>
      <td><div id="view"></div></td>
    </tr>
    <tr>
      <td  class="column4_1 h30" style="text-align:right"></td>
      <td></td>
    </tr>
    <tr>
      <td  class="column4_1 h30" style="text-align:right">图片描述:</td>
      <td><textarea style="width:300px;height:200px" name="picDesc" id="picDesc"></textarea></td>
    </tr>
  </table>
  <!-- </form> -->
  <div class="allSave">
  <input id="flag" value="${flag }" type="hidden"/>
  <div style="margin:0 auto;width: 250px; height: 30px;">
  	<a class="save2"  href="javascript:void(0)" onclick="saveActivity()">保存</a>
  	<a class="save2"  href="javascript:void(0)" onclick="resetActivity()">重置</a>
  	</div>
  </div>
</div>
	<script src="/tmx/js/photoClip/iscroll-zoom.js"></script>
	<script src="/tmx/js/photoClip/hammer.js"></script>
	<script src="/tmx/js/photoClip/jquery.photoClip.js"></script>
	<script>
	$("#clipArea").photoClip({
		width: 505,
		height: 240,
		file: "#image",
		view: "#view",
		ok: "#clipBtn",
		loadStart: function() {
			console.log("照片读取中");
		},
		loadComplete: function() {
			console.log("照片读取完成");
			clipFlag = false;
		},
		clipFinish: function(dataURL) {
			console.log(dataURL);
			
			var data = dataURL;
			data=data.split(',')[1];
			data=window.atob(data);
			var ia = new Uint8Array(data.length);
			for (var i = 0; i < data.length; i++) {
			    ia[i] = data.charCodeAt(i);
			};

			// canvas.toDataURL 返回的默认格式就是 image/png
			var blob = new Blob([ia], {type:"image/jpg"});
			fd.append('imageFile',blob); 
			clipFlag = true;
		}
	}); 
	</script>
</body>
</html>
